// 页面主色、TabBar样式
$bgcolor:#f9f9f9; //页面及Tab的背景颜色
$tabH:50px; //Tab的高度
$tabColor1:#E93B3D; //Tab文字选中颜色
$tabColor2:#8b8b8b; //Tab文字未选中颜色

// 辅助色
$text-color:#666;


// 文字、背景
$base-fz-12:12px;
$base-fz-14:14px;
$base-fz-16:16px;
$base-fz-18:18px;
$big-fz-20:20px;

// 边框
$borderColor-s:#eeeeee;
$borderColor-l:#efefef;

// 边框(四边)
@mixin borderAll($w:1px, $r:#eee) {
    border: $w solid $r;
}

@mixin borderTop($w:1px, $r:#eee) {
    border-top: $w solid $r;
}

@mixin borderBottom($w:1px, $r:#eee) {
    border-bottom: $w solid $r;
}

// 使用方式--->@include borderAll($r:red);	//mixin混入

/*  清除浮动  */
%clearFix {
    *zoom: 1;
    &:after {
        content: " ";
        display: block;
        clear: both;
        visibility: hidden;
    }
}

// 显示省略号 -->只显示一行文字
%ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
//显示省略号 -->显示多行文字
@mixin twoEllipsis($row) {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: $row; //需要控制的文本行数
    overflow: hidden;
}
//使用方式---->@extend %ellipsis;	//继承


/* flex布局 */
.u-f,
.u-f-r2,
.u-f-r,
.u-f-c,
.u-f-ac,
.u-f-jc,
.u-f-ajc,
.u-f-sbc {
    display: flex;
}

.u-f-ajc {
    justify-content: center;
    align-items: center;
}

.u-f-sbc {
    justify-content: space-between;
    align-items: center;
}

.u-f-asc {
    justify-content: space-around;
    align-items: center;
}

.u-f-item {
    flex: 1;
}

.u-f-wrap {
    flex-wrap: wrap;
}

.u-f-r {
    flex-direction: row;
}
.u-f-r2{
    flex-direction: row-reverse;
}

.u-f-c {
    flex-direction: column;
}

.u-f-start {
    justify-content: flex-start;
}

.u-f-end {
    justify-content: flex-end;
}

.u-f-jc {
    justify-content: center;
}

.u-f-jsb {
    justify-content: space-between;
}

.u-f-ac {
    align-items: center;
}

.u-f-as {
    align-items: flex-start;
}

.u-f-ae {
    align-items: flex-end;
}

